<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>南声-分享源于热爱</title>
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="//at.alicdn.com/t/font_2673097_48rfn6lutg4.css">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>

	<body>
		<div id="app">
			<!-- header -->
			<header>
				<div class="headerInfo">
					<ul class="listLeft">
						<li><a href="javascript:;"><img
									src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg"
									alt=""></a></li>
						<li><a class="active" href="javascript:;">首页</a></li>
						<li><a href="javascript:;">沸点</a></li>
						<li><a href="javascript:;">资讯</a></li>
						<li><a href="javascript:;">小册</a></li>
						<li><a href="javascript:;">活动</a></li>
						<li><a href="javascript:;">开发者大会</a></li>
						<li><input type="text" placeholder="搜索"></li>
					</ul>
					<ul class="listRight">
						<!-- <li><input type="text" placeholder="搜索"></li> -->
						<li><a class="devCenter" href="javascript:;">创作者中心</a></li>
						<li v-if="loginer == null"><a class="write" href="javascript:;" @click="goLoginPage">写文章 <i
									class="iconfont icon-caret-down"></i></a></li>
						<li v-if="loginer == null"><a class="loginBtn" href="./login.html">登录</a></li>
						<li v-else class="userfaceLi" @mouseover="showSub = true" @mouseleave="showSub = false">
							<a class="userface" href="javascript:;">
								<!-- <img src="" alt=""> --> {{loginer.nickname.substr(0,1)}}
							</a>
							<div class="subMenu" v-show="showSub">
								<div><a href="./personal.html">个人中心</a></div>
								<div><a href="./publish.html">写文章</a></div>
								<div><a id="logoutBtn" href="javascript:;" @click="logout">退出登录</a></div>
							</div>
						</li>
					</ul>
				</div>
			</header>
			<!-- nav -->
			<nav>
				<ul>
					<li><a class="active" href="javascript:;">推荐</a></li>
					<li :key="item.id" v-for="(item,index) in categoryies"><a href="javascript:;"
							v-html="item.cname"></a>
					</li>
				</ul>
			</nav>
			<!-- content -->
			<div class="content">
				<div class="articleList">
					<ul class="articleListHeader">
						<li><a @click="initArticles(3)" class="active" href="javascript:;">热门</a></li>
						<li><a @click="initArticles(2)" href="javascript:;">最新</a></li>
						<li><a @click="initArticles(1)" href="javascript:;">热榜</a></li>
					</ul>
					<!-- 文章列表 -->
					<ul class="articleListContent">
						<li :key="article.id" @click="showArticleDetail(article.id)"
							v-for="(article,index) in articleIndex">
							<div class="contentInfo">
								<!-- 文章作者信息 -->
								<div>
									<a class="hoverInfo" href="javascript:;"
										@click.stop="showAuthor(article.author.id)">{{article.author.nickname}}</a>
									<a href="javascript:;">{{article.publishTime}}</a>
									<a class="hoverInfo" href="javascript:;">{{article.category.cname}}</a>
									<!-- ·
                                <a class="hoverInfo" href="javascript:;">JavaScript</a> -->
								</div>
								<!-- 文章标题 -->
								<h4>{{article.title}}</h4>
								<!-- 文章内容介绍 -->
								<div>
									<a href="javascript:;">{{article.hmContent}}...</a>
								</div>
								<!-- 文章浏览点赞信息 -->
								<div class="viewInfos">
									<i class="iconfont icon-eye"> {{article.views}}</i>
									<i class="iconfont icon-zan hoverInfo"> {{article.giveLike}}</i>
									<!-- <i class="iconfont icon-message hoverInfo"> 41</i> -->
								</div>
							</div>
							<div class="contentImg">
								<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5367ba25a0a4092bcf821a8f2b88212~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp"
									alt="">
							</div>
						</li>
					</ul>
				</div>
				<div class="infoList">
					<div>
						<div>
							<i style="color: #fc3;" class="iconfont icon-calendar"> 早上好！</i>
							<a href="javascript:;">去签到</a>
						</div>
						<div class="signInfo">
							连续签到赢掘金惊喜好礼
						</div>
					</div>
					<div>
						<h5>掘金 - juejin.cn</h5>
						<div class="desc">一个帮助开发者成长的社区</div>
						<div>
							<select>
								<option value="">+86</option>
								<option class="a" value="">
									中国澳门&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+853
								</option>
								<option value="">中国台湾&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+886</option>
								<option value="">中国香港&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;+891</option>
							</select><input class="mobile" type="number" placeholder="请输入手机号">
						</div>
						<div class="checkCode">
							<input type="text" maxlength="4" placeholder="验证码">
							<a href="javascript:;">获取验证码</a>
						</div>
						<div>
							<a class="loginSoon" href="javascript:;">立即登录</a>
						</div>
						<div class="license">
							<span>注册登录即表示</span><br>
							<span>同意</span>
							<a href="javascript:;">用户协议</a>
							<span>、</span>
							<a href="javascript:;">隐私政策</a>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 960px;margin: 5px auto;color: #fff !important;">
				<el-pagination @current-change="currentChange" background layout="prev, pager, next" :total="total"
					:page-size="pageSize" :current-page="pageNum">
				</el-pagination>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="./js/api.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					listId: 1,
					total: 0,
					articleIndex: [],
					pageNum: 1,
					pageSize: 3,
					categoryies: [],
					loginer: JSON.parse(window.sessionStorage.getItem('loginer')),
					showSub: false
				},
				methods: {
					showAuthor(authorId) {
						window.location.href = "./personal.html?authorId=" + authorId;
					},
					showArticleDetail(id) {
						window.location.href = "./details.html?id=" + id;
					},
					initNewArticles() { // 查询文章
						getRequest('http://localhost:8080/article/index?listId=' + this.listId + '&pageNum=' + this
							.pageNum + '&pageSize=' + this.pageSize).then(resp => {
							if (resp.data) {
								this.articleIndex = resp.data.list;
								this.total = resp.data.total;
							}
						})
					},
					currentChange(pageNum) { // 切换页码
						this.pageNum = pageNum;
						this.initNewArticles();
					},
					initArticles(listId) { // 查询文章
						if (listId) {
							this.listId = listId;
						}
						this.pageNum = 1;
						this.initNewArticles();
					},
					initCategories() { // 查询文章类别
						getRequest('http://localhost:8080/category/list').then(resp => {
							if (resp.data) {
								this.categoryies = resp.data;
							}
						})
					},
					goLoginPage() { // 去登录页
						window.location.href = './login.html';
					},
					logout() { // 用户退出
						if (confirm('是否确定退出')) {
							getRequest('http://localhost:8080/user/logout').then(resp => {
								if (resp.data) {
									alert(resp.data.msg);
									window.sessionStorage.removeItem('loginer');
									window.location.reload();
								}
							})
						}
					}
				},
				mounted() {
					this.initCategories();
					this.initArticles();
				}
			})
		</script>
	</body>

</html>
